<template>
  <div class="invoiceBox">
    <div>
      <span>发票类型</span>
      <div class="invoiceType" @click="selInvoiceTypeBox">{{InvoiceType==0 ? '增值税电子普通发票' : '增值税专用发票'}}<span class="iconfont iconarrow-right right"></span></div>
    </div>
    <div>
      <span>抬头类型</span>
      <div>
        <label><input type="radio" checked name="titleType" value="0" @change="select">个人或事业单位</label>
        <label><input type="radio" name="titleType" value="1" @change="select">企业</label>
      </div>
    </div>
     <!-- customerName购方抬头 customerTaxNo购方税号 customerAddress购方地址;
      customerTelephone购方电  customerBankAccount购方银行 notificationEmail收票邮箱;
      notificationPhone收票手机号 收票邮箱验证邮箱格式 收票邮箱跟收票电话两者至少填一个
      抬头100 手机20 收票手机20 购方地址100企业必填 购方银行账号100企业必填 购方税号20企业必填 -->
    <mt-field label="发票抬头" :state="customerNameState" placeholder="抬头名称" v-model="customerName"></mt-field>

    <div class="personal" :style="{display: titleStyle==0 ? 'block' : 'none'}">
      <mt-field label="身份证号" placeholder="身份证号"></mt-field>
      <mt-field label="开户行" :state="customerBankAdressState" placeholder="选填(80个字符内)" v-model="customerBankAdress"></mt-field>
      <mt-field label="账号" :state="customerBankNumState" placeholder="选填" v-model="customerBankNum"></mt-field>
      <mt-field label="地址" :state="customerAddressState" placeholder="选填(100个字符内)" v-model="customerAddress"></mt-field>
      <mt-field label="电话" :state="customerTelephoneState" placeholder="选填" v-model="customerTelephone"></mt-field>
    </div>

    <div class="company" :style="{display: titleStyle==1 ? 'block' : 'none'}">
      <mt-field label="税号" :state="taxIDState" v-model="customerTaxNo" placeholder="纳税人识别号"></mt-field>
      <mt-field label="开户银行" :state="customerBankAdressState" placeholder="选填(80个字符内)" v-model="customerBankAdress"></mt-field>
      <mt-field label="银行账号" :state="customerBankNumState" placeholder="选填" v-model="customerBankNum"></mt-field>
      <mt-field label="企业地址" :state="customerAddressState" placeholder="选填(100个字符内)" v-model="customerAddress"></mt-field>
      <mt-field label="企业电话" :state="customerTelephoneState" placeholder="选填" v-model="customerTelephone"></mt-field>
    </div>

    <div class="setTitle">
      <label for="setTitle">设置为默认抬头</label>
      <input type="radio" name="setTitle" id="setTitle" :checked="setTitle" @click="setDefaultTitle">
    </div>
    <div class="invoice">
      <span>发票内容</span>
      <div @click="goPreview">预览</div>
    </div>
    <div class="invoiceBtn" @click="invoice">开具发票</div>

    <!-- 选择发票类型 -->
    <mt-popup
      v-model="popupVisible"
      position="bottom">
      <div class="notice">
        <div class="tou">
          <div class="title">选择发票类型</div>
          <span class="cha" @click="cancel">x</span>
        </div>
        <div class="content">
          <div class="item">
            <div class="text">
              <span>增值税电子普通发票</span>
              <span>电子发票开具后将发送到注册的手机号码</span>
            </div>
            <input type="radio" v-model="InvoiceType" value="0" @change="selInvoiceType">
          </div>
          <div class="item">
            <div class="text">
              <span>增值税专用发票</span>
              <span>电子发票开具后将发送到注册的手机号码</span>
            </div>
            <input type="radio" v-model="InvoiceType" value="1" @change="selInvoiceType">
          </div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { Indicator } from 'mint-ui'
export default {
  data () {
    return {
      // 表单数据
      // 发票类型 0：代表普通发票  1：代表专用发票
      InvoiceType: '0',
      // 抬头类型 0：个人或事业单位； 1：企业
      titleStyle: '0',
      // 发票抬头
      customerName: '',

      // person
      // 税号
      customerTaxNo: '',
      // 开户行地址
      customerBankAdress: '',
      // 开户银行账号
      customerBankNum: '',
      // 个人或事业单位地址
      customerAddress: '',
      // 个人电话
      customerTelephone: '',

      // 是否设置为默认抬头
      setTitle: false,

      // 表单验证状态位
      customerNameState: '',
      customerBankAdressState: '',
      customerBankNumState: '',
      customerAddressState: '',
      customerTelephoneState: '',
      taxIDState: '',

      // 控制发票类型弹出框显示与隐藏
      popupVisible: false

    }
  },
  created () {

  },
  methods: {
    // 选择抬头类型
    select (e) {
      this.titleStyle = e.target.value
      console.log(this.titleStyle)
    },
    // 设置默认tait
    setDefaultTitle () {
      this.setTitle = !this.setTitle
      console.log(this.setTitle)
    },
    // 弹出 选择发票类型框
    selInvoiceTypeBox () {
      this.popupVisible = true
    },
    // 点击 × 关闭选择发票类型框
    cancel () {
      this.popupVisible = false
    },
    // 选择发票类型
    selInvoiceType (e) {
      console.log(e.target.value)
      console.log(this.InvoiceType)
      this.popupVisible = false
    },
    // 预览发票
    goPreview () {
      const invoicePreview = {
        customerName: this.customerName,
        customerTaxNo: this.customerTaxNo,
        customerBankAdress: this.customerBankAdress,
        customerBankNum: this.customerBankNum,
        customerAddress: this.customerAddress,
        customerTelephone: this.customerTelephone
      }
      this.$router.push({ name: 'invoicePreview', params: invoicePreview })
    },
    // 点击开具发票按钮
    invoice () {
      // 1、核验输入信息状态码

      // 2、调用后台开票请求接口

      // 3、弹出正在验证的提示框
      Indicator.open()
      Indicator.open('信息核验中...请稍等')
      setTimeout(() => {
        // 4、获得后台返回数据后，关闭提示框
        Indicator.close()
      }, 1500)
    }
  },
  watch: {
    customerName: function (newVal, oldVal) {
      const length = newVal.trim().length
      if (length > 0 && length <= 100) {
        this.customerNameState = 'success'
      } else {
        this.customerNameState = 'error'
      }
    },
    customerBankAdress: function (newVal, oldVal) {
      const length = newVal.trim().length
      if (length > 0 && length <= 81) {
        this.customerBankAdressState = 'success'
      } else {
        this.customerBankAdressState = 'error'
      }
    },
    customerBankNum: function (newVal, oldVal) {
      const length = newVal.trim().length
      if (length > 0 && length < 20) {
        this.customerBankNumState = 'success'
      } else {
        this.customerBankNumState = 'error'
      }
    },
    customerAddress: function (newVal, oldVal) {
      const length = newVal.trim().length
      if (length > 0 && length < 100) {
        this.customerAddressState = 'success'
      } else {
        this.customerAddressState = 'error'
      }
    },
    customerTaxNo: function (newVal, oldVal) {
      const length = newVal.trim().length
      if (length > 0 && length < 20) {
        this.taxIDState = 'success'
      } else {
        this.taxIDState = 'error'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .invoiceBox {
    padding: 50px 15px 0 15px;
    font-size: 13px;
    color: #333;
    /deep/ .mint-popup {
      width: 100%;
    }
    /deep/ .v-modal {
      opacity: 0;
    }
    > div:nth-child(1), div:nth-child(2), .setTitle, .invoice {
      display: flex;
      justify-content: space-between;
      align-content: center;
      height: 40px;
      line-height: 40px;
      .invoiceType {
        color: #666;
        padding-left: 30px;
      }
      .right {
        margin-left: 10px;
      }
    }
    .personal, .company {
      margin: 10px 0;
    }
    .invoice div {
      box-sizing: border-box;
      height: 29px;
      line-height: 27px;
      padding: 0 7px;
      border: 1px solid rgb(245, 158, 14);
      border-radius: 10px;
      color: rgb(245, 158, 14);
    }

    /deep/ .mint-cell {
      height: 40px;
      min-height: 40px;
    }
    /deep/ .mint-cell-text {
      color: #222;
    }
    /deep/ input {
      font-size: 13px;
      text-align: right;
    }
    /deep/ .mint-cell-wrapper {
      font-size: 13px;
      padding: 0;
      background-image: none;
    }

    /deep/ input::-webkit-input-placeholder {
      font-size: 13px;
      color: #CCCCCC;
      text-align: right;
    }
    .invoiceBtn {
      width: 90%;
      height: 35px;
      line-height: 35px;
      margin: 35px auto;
      text-align: center;
      color: #fff;
      background-color: rgb(245, 158, 14);
      border-radius: 5px;
    }

    .notice {
      font-size: 13px;
      .cha {
        position: absolute;
        right: 15px;
        top: -10px;
        font-size: 22px;
        line-height: 22px;
        padding: 5px;
      }
      .title {
        text-align: center;
        font-weight: 700;
        color: #333;
        margin-top: 20px;
      }
      .tou {
        position: relative;
      }
      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        box-sizing: border-box;
        margin: 40px;
        height: 180px;
        word-wrap: break-word;
        .item {
          display: flex;
          justify-content: space-between;
          width: 100%;
          .text {
            display: flex;
            flex-direction: column;
            text-align: left;
            font-size: 11px;
            span:nth-child(1) {
              font-size: 15px;
              font-weight: 700;
              line-height: 18px;
            }
            span:nth-child(2) {
              line-height: 20px;
            }
          }
        }
      }
    }

  }
</style>
